<script setup>
import { ref } from 'vue'
import { onMounted } from 'vue';
import { ArrowDown, Expand, Fold } from '@element-plus/icons-vue';
import { Avatar, HomeFilled, Money, School } from '@element-plus/icons-vue';
import { Tools } from '@element-plus/icons-vue';
import Breadcrumb from '../../components/Breadcrumb.vue';
import dashboard from '../../components/dashboard.vue';
import { login } from '../../api/user';
import router from '../../router';
//判断左侧菜单是否展开
const isCollapse = ref(false)
//定义系统标题是否展开
const title = ref(true)
//定义用户信息
const userInfo = ref ({})
onMounted(()=>{
    const user=localStorage.getItem("user")
    if(user){
        userInfo.value=JSON.parse(user)
        console.log(userInfo)
        
    }
})

//退出登录
const logout=()=>{
    //清除本地数据并跳转到登录界面
    localStorage.removeItem("user")
    console.log("1")
    router.push("/")
}
//控制左侧菜单的展开与显示
const collapse = () => {
    isCollapse.value= !isCollapse.value
    if(isCollapse.value) {
        isCollapse.value = true
        title.value = false
    }else{
        title.value= false
    }
}

</script>
<template>
    <div class="common-layout">
        <el-container>
            <el-aside :width="isCollapse?'64px':'200px'">
                <!--  -->
                <div class="system-title">
                    <img src="../../assets/images/logo.png" />
                    <span> 软件工程学院</span>
                </div>
                <el-menu default-active="/home" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" unique-opened :collapse-transition="collapse-transition" router>
                    <el-menu-item index="/home">
                        <el-icon>
                            <HomeFilled />
                        </el-icon>
                        <template #title>
                        <span>首页</span>
                        </template>
                    </el-menu-item>
                    <el-sub-menu index="2">
                        <template #title>
                            <el-icon>
                                <Tools />
                            </el-icon>
                            <span>系统管理</span>
                        </template>
                        <el-menu-item index="/user">用户管理</el-menu-item>
                        <el-menu-item index="1-2">通知公告</el-menu-item>
                        <el-menu-item index="1-3">专业管理</el-menu-item>
                        <el-menu-item index="1-4">班级管理</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="3">
                        <template #title>
                            <el-icon>
                                <School />
                            </el-icon>
                            <span>宿舍管理</span>
                        </template>
                        <el-menu-item index="2-1">宿舍信息</el-menu-item>
                        <el-menu-item index="2-2">入住管理</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="4">
                        <template #title>
                            <el-icon>
                                <Money />
                            </el-icon>
                            <span>财务管理</span>
                        </template>
                        <el-menu-item index="3-1">缴费管理</el-menu-item>
                        <el-menu-item index="3-2">缴费记录</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="5">
                        <template #title>
                            <el-icon>
                                <Avatar />
                            </el-icon>
                            <span>学生管理</span>
                        </template>
                        <el-menu-item index="4-1">学生信息</el-menu-item>
                        <el-menu-item index="4-2">报道信息</el-menu-item>
                    </el-sub-menu>

                </el-menu>
            </el-aside>
            <el-container>
                <el-header>
                    <div class="collapse" @click="collapse">
                        <el-icon :size="28" v-if="isCollapse" style="cursor:pointer;">
                            <Expand />
                        </el-icon>
                        <el-icon :size="28" v-if="!isCollapse" style="cursor:pointer;">
                            <Fold />
                        </el-icon>
                    </div>
                    <span>新生报到服务平台</span>
                    <!-- 右侧头像信息 -->
                    <div class="user-info">
                        <img src="../../assets/images/u169.svg" />
                        <el-dropdown>
                            <span class="el-dropdown-link">
                               {{ userInfo.username }}
                                <el-icon>
                                    <ArrowDown/>
                                </el-icon>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item>个人信息</el-dropdown-item>
                                    <el-dropdown-item>修改密码</el-dropdown-item>
                                    <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </el-header>
                <el-main>
                    <!-- 面包屑组件 -->
                    <Breadcrumb></Breadcrumb>
                    <dashboard v-if="$route.path==='/home'"></dashboard>
                    <!-- 路由视图 -->
                     <RouterView></RouterView>
                </el-main>
                <el-footer>Footer</el-footer>
            </el-container>
        </el-container>
    </div>
</template>
<style scoped>
.common-layout {
    width: 100vw;
    height: 100%;
}

/* 左侧菜单 */
.el-aside {
    background-color: rgb(243, 245, 248);
    color: #333;
    line-height: 200px;
    overflow: hidden;
    /* 溢出隐藏 */

}

/* header */
.el-header {
    background-color: rgb(242, 243, 245);
    color: #333;
    display: flex;
    line-height: 60px;
    padding: 0;
    position: relative;
}

/* 主体部分 */
.el-main {
    background-color: #fff;
    color: #333;
    padding: 0;
    height: 660px;
}

/* footer */
.el-footer {
    background-color: rgb(242, 243, 245);
    color: #333;
    text-align: center;
    line-height: 60px;
}

/* 二级菜单往左移动 */


.system-title {
    width: 200px;
    height: 60px;
    background-color: brown;
    line-height: 60px;
    position: relative;
    color: #fff;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    text-indent: 48px;
}

.system-title img {
    width: 50px;
    position: absolute;
    left: 10px;
    top: 5px;
}

.collapse {
    padding-top: 10px;
    padding-left: 10px;
}

.el-header span {
    display: inline-block;
    font-size: 20px;
    line-height: 60px;
    margin-left: 10px;
}

.user-info {
    position: absolute;
    right: 10px;
    top: 5px;
    font-size:2px;
}
:deep() .el-dropdown-link{
    outline: none;
    cursor: pointer;
    font-size: 24px;
}

</style>
